{% assign urlArray = page.url | replace: '/', ' ' | split: " " %}

{% assign activePlatform = urlArray[0] %}
{% assign platform = site.data.routes.platforms | where: "href", activePlatform | first %}

{% assign activeHub = urlArray[2] %}
{% assign hub = platform.hubs | where: "href", activeHub | first %}

{% assign activeSection = urlArray[3] | remove: ".html" %}
{% assign section = hub.sections | where: "href", activeSection | first %}

<ul class="lhn-items">
    <li class="home-link">
        {% if page.url == "/" %}
            <div class="selected">Home</div>
        {% else %}
            <a href="/" class="link">Home</a>
        {% endif %}
    </li>

    {% for platform in site.data.routes.platforms %}
        {% if platform.href == activePlatform %}
            <li>
                <div class="icon-with-link selected">
                    <a href="/"><img src="/assets/images/down.svg" class="base-icon"></img></a>
                    <span>{{ platform.title }}</span>
                </div>
                {% for hub in platform.hubs %}
                <ul>
                    {% if hub.href == activeHub %}
                        <div  class="icon-with-link selected">
                            <a href="/{{ activePlatform }}/hubs"><img src="/assets/images/down.svg" class="base-icon"></img></a> 
                            <span>{{ hub.title }}</span>
                        </div>
                        <ul class="nested-treeview">
                            {% if hub.articles %} 
                                {% assign sortedSectionsAndArticles = hub.sections | concat: hub.articles | sort: 'title' %} 
                            {% else %} 
                                {% assign sortedSectionsAndArticles = hub.sections | sort: 'title' %} 
                            {% endif%}
                            {% for item in sortedSectionsAndArticles %}
                                {% if item.articles %}
                                    <li>
                                        {% if item.href == activeSection %}
                                            <div class="icon-with-link selected">
                                                <a href="/{{ activePlatform }}/hubs/{{ hub.href }}"><img src="/assets/images/down.svg" class="base-icon"></img></a>
                                                <span>{{ item.title }}</span>
                                            </div>
                                            <ul>
                                                {% for article in item.articles %}
                                                    {% assign article_href = item.href | append: '/' | append: article.href %}
                                                    {% include lhn-article-link.html platform=activePlatform hub=hub.href href=article_href title=article.title %}
                                                {% endfor %}
                                            </ul>
                                        {% else %}
                                            <a href="{{ item.href }}" class="icon-with-link link">
                                                <img src="/assets/images/arrow-right.svg" class="base-icon"></img>
                                                {{ item.title }}
                                            </a>
                                        {% endif %}
                                    </li>
                                {% else %}
                                    {% include lhn-article-link.html platform=activePlatform hub=hub.href href=item.href title=item.title %}
                                {% endif %}
                            {% endfor %}
                        </ul>
                    {% else %}
                        <li>
                            <a href="/{{ activePlatform }}/hubs/{{ hub.href }}" class="icon-with-link link">
                                <img src="/assets/images/arrow-right.svg" class="base-icon"></img>
                                {{ hub.title }}
                            </a>
                        </li>
                    {% endif %}
                </ul>
                {% endfor %}
            </li>

        {% else %}
            <li>
                <a href="/{{ platform.href }}/hubs" class="icon-with-link link">
                    <img src="/assets/images/arrow-right.svg" class="base-icon"></img>
                    {{ platform.title }}
                </a>
            </li>
        {% endif %}
    {% endfor %}
</ul>
